<template>
    <div id="deviceCountNum"/>
</template>

<script>
    import {getDeviceTotalInfoByPro} from "../../../../api/bigData/bigDataApi";

    export default {
        name: "deviceCountNum",
        data(){
            return {
                countData:[384,135,102,115,97,170,139,158,139,122,29,85,42,56,96],
                countArea:["张家川镇", "龙山镇" , "恭门镇" , "马鹿镇" , "梁山镇" , "马关镇" ,
                "刘堡镇" , "胡川镇" , "大阳镇" , "川王镇" , "张棉乡" , "木河乡" , "连五乡" , "平安乡" , "阎家乡"],
            }
        },
        mounted() {
            let h = document.body.clientHeight;
            document.getElementById("deviceCountNum").style.height = 40.12 + "vh";
            // 查询数据

            this.initDom();
        },
        methods: {

            initDom: function () {
                //基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('deviceCountNum'), 'light');
                let self = this;
                let statisticsplatformData = [];
                statisticsplatformData.push(self.countArea);
                statisticsplatformData.push(self.countData);
                let option = {
                    //方式2
                    tooltip: {
                        trigger: "item"
                    },
                    // 直角坐标系内绘图网格
                    grid: {
                        left:20,
                        bottom:10,
                        containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
                    },
                    // x轴
                    xAxis: {
                        type: 'category',//坐标轴类型
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(199,199,200,0.1)',
                                type: 'dashed',
                            }
                        },
                        axisLabel: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(0,0,0,0.5)'
                            },
                            //调整y轴的lable
                            textStyle: {
                                // 让字体变大
                                fontSize: 14,
                                font: 'PingFang SC',
                                color:'#FFFFFF'

                            },
                            interval:0,
                        },
                        //改变坐标线的颜色
                        axisLine: {
                            symbol: ['none'],
                            symbolSize: [10,28],
                            lineStyle: {
                                color: 'rgba(15,66,134,0.5)',
                                width: 0.5
                            }
                        },
                        data:statisticsplatformData[0]
                    },
                    // y轴
                    yAxis: {
                        type: 'value',
                        name:'单位(台)',
                        //刻度线
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(199,199,200,0.1)',
                                type: 'dashed',
                            }
                        },
                        axisLabel: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(0,0,0,0.5)'
                            },
                            //调整y轴的lable
                            textStyle: {
                                //字体
                                fontSize: 14,
                                color: '#FFFFFF',
                                font: 'PingFang SC'
                            },

                        },
                        //改变坐标线的颜色
                        axisLine: {
                            symbol: ['none'],
                            symbolSize: [15, 24],
                            lineStyle: {
                                color: 'rgba(255,255,255,1)',
                                width: 0
                            }
                        }
                    },

                    series: [
                        //左面
                        {
                            name: "统计",
                            type: "bar",
                            showSymbol: false,
                            hoverAnimation: false,
                            data: statisticsplatformData[1],
                            barWidth: 15, //柱图宽度
                            // barCategoryGap:'60%',
                            barGap:'95%',/*多个并排柱子设置柱子之间的间距*/
                            barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
                            itemStyle: {
                                normal: {
                                    color: {
                                        type: 'linear',
                                        x: 0, x2: 0, y: 1, y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: 'rgba(27, 129, 243, 0.0)',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(28, 235, 254, 1)',
                                            },
                                        ]
                                    },
                                    barBorderRadius:[3,0,0,0,],
                                },
                                barGap:0
                            }
                        },
                        //右面
                        {
                            name:'统计',
                            tooltip:{
                                show:true
                            },
                            type: 'bar',
                            barWidth:15,
                            itemStyle:{
                                normal:{
                                    color: {
                                        type: 'linear',
                                        x: 0, x2: 0, y: 1, y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: 'rgba(27, 129, 243, 0.0)',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(28, 235, 254, 1)',
                                            },
                                        ]
                                    },
                                    barBorderRadius:[0,3,0,0]
                                }
                            },
                            data: statisticsplatformData[1],
                            barGap:0
                        },
                        {
                            name:'b',
                            tooltip:{
                                show:false
                            },
                            type: 'pictorialBar',
                            itemStyle: {  //顶部
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color:"#FFFFFF",
                                            fontSize: 10
                                        }
                                    },
                                    color:"#00B2CD",
                                    borderWidth:0.15,
                                }
                            },
                            symbol: 'diamond',
                            symbolOffset: [0, '-45%'],
                            symbolSize: [31, 30 * 0.45],
                            symbolPosition: 'end',
                            data: statisticsplatformData[1],
                            z:3
                        },
                    ]
                };
                // 绘制图表
                myChart.setOption(option);
                //====>监听窗口变化 三种方式<====
                //自适应2
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            },
        }
    }


</script>

<style scoped>
    #deviceCountNum {
        height: 100px;
        width: 100%;
    }
</style>
